<template>
  <!-- 数据来源 -->
  <div class="echarts" ref="echartsRef"></div>
</template>
<script setup lang="ts" name="cure">
import { ref } from "vue";
import * as echarts from "echarts";
import { useEcharts } from "@/hooks/useEcharts";

const echartsRef = ref<HTMLElement>();
const initChart = (data: any) => {
  const myChart: echarts.ECharts = echarts.init(echartsRef.value as HTMLElement);
  const option = {
    tooltip: {
      trigger: "axis",
      backgroundColor: "transparent",
      axisPointer: {
        type: "none"
      },
      padding: 0,
      formatter: (p: any) => {
        let dom = `<div style="width:100%; height: 70px !important; display:flex;flex-direction: column;justify-content: space-between;padding:10px;box-sizing: border-box;
      color:#fff; background: #6B9DFE;border-radius: 4px;font-size:14px; ">
        <div style="display: flex; align-items: center;"> <div style="width:5px;height:5px;background:#ffffff;border-radius: 50%;margin-right:5px"></div>平台 :  ${p[0].name}</div>
        <div style="display: flex;align-items: center;"><div style="width:5px;height:5px;background:#ffffff;border-radius: 50%;margin-right:5px"></div>数据量 :  ${p[0].value}</div>
      </div>`;
        return dom;
      }
    },
    toolbox: {
      show: true,
      orient: "horizontal"
    },
    grid: {
      left: "0",
      right: "0"
    },
    dataZoom: [
      {
        show: false,
        height: 10,
        xAxisIndex: [0],
        bottom: 0,
        startValue: 0, //数据窗口范围的起始数值
        endValue: 9, //数据窗口范围的结束数值
        handleStyle: {
          color: "#6b9dfe"
        },
        textStyle: {
          color: "transparent"
        }
      },
      {
        type: "inside",
        show: true,
        height: 0,
        zoomLock: true //控制伸缩
      }
    ],
    xAxis: [
      {
        type: "category",
        data: data.map((val: any) => {
          return {
            value: val.spotName
          };
        }),
        axisTick: {
          show: false
        },
        axisLabel: {
          // interval: time > 4 ? 27 : 0,
          margin: 20,
          interval: 0,
          color: "#a1a1a1",
          fontSize: 14,
          formatter: function (name: string) {
            undefined;
            return name.length > 8 ? name.slice(0, 8) + "..." : name;
          }
        },
        axisLine: {
          lineStyle: {
            color: "#F6F6F7",
            width: 2
          }
        }
      }
    ],
    yAxis: [
      {
        min: 0,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "#edeff5",
            width: 2
          }
        },
        axisLabel: {
          color: "#a1a1a1",
          fontSize: 16,
          fontWeight: 400,
          formatter: function (value: number) {
            if (value === 0) {
              return value;
            } else if (value >= 10000) {
              return value / 10000 + "w";
            }
            return value;
          }
        }
      }
    ],
    series: [
      {
        name: "Direct",
        type: "bar",
        data: data.map((val: any) => {
          return {
            value: val.value
          };
        }),
        barWidth: "45px",
        itemStyle: {
          color: "#C5D8FF",
          borderRadius: [12, 12, 0, 0]
        },
        emphasis: {
          itemStyle: {
            color: "#6B9DFE"
          }
        }
      }
    ]
  };
  useEcharts(myChart, option);
};
defineExpose({
  initChart
});
</script>
<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
